<template>
  <div class="cm-output">
    <div class="output-header"><span>运行结果</span></div>
    <pre id="output">{{ this.out?this.out:this.err }}</pre>
  </div>
</template>

<script>
export default {
  name: 'Output',
  props: {
    result: {
      type: Object,
      default: () => { }
    },
    data () { return {} }
  },
  computed: {
    out () { return this.result.out },
    err () { return this.result.err }
  },
  watch: {
    out: function (newOut) {
      const output = document.querySelector('#output')
      if (newOut !== '') output.style.color = '#ffffff'
    },
    err: function (newErr) {
      const output = document.querySelector('#output')
      if (newErr !== '') output.style.color = '#f56c6c'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.cm-output
  display flex
  flex-direction column
  width 48%
  box-shadow 3px 3px 5px 1px shadow-color
  color #fff
  .output-header
    height 35px
    padding 0 14px
    background-color cm-wrapper
    border-radius 6px 6px 0 0
    &>span
      line-height 35px
  #output
    display block
    height 70vh
    padding 4px 15px
    border-radius 0 0 6px 6px
    background-color cm-bg-color
</style>
